import { reactive } from 'vue'
import { useBreakpoints, breakpointsAntDesign } from '@vueuse/core'
// { "xs": 480, "sm": 576, "md": 768, "lg": 992, "xl": 1200, "xxl": 1600 }
const breakpoints = useBreakpoints(breakpointsAntDesign)

const sm = breakpoints.smaller('sm')
const md = breakpoints.between('sm', 'md')
const lg = breakpoints.between('md', 'lg')
const xl = breakpoints.between('lg', 'xl')
const xxl = breakpoints.greater('xl')

const ScreenInfo = reactive({
  size: {
    sm: sm,
    md: md,
    lg: lg,
    xl: xl,
    xxl: xxl
  }
})

export { ScreenInfo }
